<template>
  <div class="firend-container">
    <div class="title-container">
      <h1 class="title">
        友链管理
      </h1>
    </div>
    <el-button
      class="filter-item"
      type="primary"
      icon="el-icon-edit"
      @click="handleCreate"
      style="margin-left:20px"
    >新建</el-button>
    <from-table 
      :tablekey="tablekey"
      :listLoading="listLoading"
      :list="list"
      @handleUpdate="handleUpdate"
      @handleDelete="handleDelete"
    />
    <from-dialog
      :title="title"
      :dialogFormVisible="dialogFormVisible"
      :row="updateRow"
      @createData="createData"
      @updateData="updateData"
      @closeDialog="closeDialog"
    ></from-dialog> 
  </div>
</template>

<script>
import table  from '@/components/board/Firend/Table'
import dialog from '@/components/board/Firend/Dialog'
import FirendService from '@/service/friendlink'

const firendService = new FirendService();
export default {
  name:'FirendLink',
  components:{
     FromTable:table,
     FromDialog:dialog
  },
  data(){
    return{
      tablekey:3,
      listLoading:false,
      list:[],
      title:'',
      dialogFormVisible:false,
      updateRow:{}
    }
  },
  created(){
    this.initInfo();
  },
  methods:{
    async initInfo(){
      this.list = await firendService.findFirendLink();
    },
    handleCreate(){
      this.title = '新建友链'
      this.dialogFormVisible = true;
    },
    handleUpdate(row){
      this.title = '修改友链'
      this.dialogFormVisible = true;
      this.updateRow = row;
    },
    handleDelete(row,index){
      let id = row.id;
      firendService.destroyProject({id}).then(()=>{
        this.list.splice(index,1)
      })
    },
    handleUpdateStatus(row,tar){
       let status = tar==='up' ? 1 : 0,
          id = row.id 
        firendService.changeEssayStatus({id,status}).then(()=>{
          row.status = status
        })
    },
    createData(data){
      let formData = new FormData();
      formData.append("files",data.file);
      formData.append('projectname',data.projectName);
      formData.append('projectlink',data.projectLink);
      console.log(data);
      firendService.createProject(formData).then( ()=>{
        this.closeDialog();
        this.initInfo();
      });
      
    },
    updateData(data){
      let formData = new FormData();
      formData.append("files",data.file);
      formData.append("projectname",data.projectName);
      formData.append('projectlink',data.projectLink);
      formData.append("id",this.updateRow.id);
       firendService.updateProject(formData).then(()=>{
         this.closeDialog();
         this.initInfo();
       })
      
    },
    closeDialog(type){
      this.dialogFormVisible = false;
       this.updateRow = {};
    }
  }

}
</script>

<style>
 .title-container{
    width: 100%;
    padding: 20px;
    font-weight:500;
  }
  .title{
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e5e5;
  }
  .firend-container{
    height: 100%;
    overflow: auto;
  }
</style>